<%--
  Created by IntelliJ IDEA.
  User: zhangzhengwei2006
  Date: 2024/1/3/0003
  Time: 14:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首页</title>
    <script src="<%=request.getContextPath() %>/static/jq/jquery-3.3.1.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

        body {
            user-select: none;
        }

        a {
            color: #fff;
            text-decoration: none;
        }

        ul, li {
            list-style: none;
        }

        .box {
            height: 100vh;
            display: flex;
            overflow: hidden;
        }

        .box-left {
            width: 250px;
            height: 100%;
            background-color: rgb(47, 47, 47);
        }

        .box-right {
            width: calc(100% - 250px);
            height: 100%;
            /*background-color: aquamarine;*/
        }

        .right-top {
            height: 55px;
            position: relative;
            background-color: rgb(109, 109, 109);
        }

        .right-bottom {
            height: calc(100% - 55px);
            /*background-color: rgb(65, 65, 65);*/
        }

        iframe {
            overflow: hidden;
        }

        .box-left > ul > li > a {
            height: 50px;
            display: flex;
            align-items: center;
        }

        img {
            width: 17px;
            margin-left: 20px;
            margin-right: 10px;
        }

        .box-left > ul > li > a > img:not(:first-child) {
            margin-left: 110px;
        }

        .box-left > ul > li > ul {
            display: none;
        }

        .box-left > ul > li > ul > li > a {
            width: 100%;
            height: 50px;
            /* padding-left: 15%; */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        a:hover {
            background-color: rgb(72, 72, 72);
        }

        .box-right > .right-top > .right-left {
            right: 20px;
            height: 55px;
            width: 150px;
            display: flex;
            position: absolute;
        }

        .box-right > .right-top > .right-left > .name {
            width: 95px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .box-right > .right-top > .right-left > .avatar {
            width: 55px;
            overflow: hidden;
            border-radius: 5px;
        }

        .box-right > .right-top > .right-left > .avatar > img {
            width: 55px;
            height: 55px;
            margin-left: 0;
            margin-right: 0;
        }

        .gr {
            position: absolute;
            top: 65px;
            width: 70px;
            height: 100px;
            z-index: 9999;
            border-radius: 5px;
            background-color: #fff;
            box-shadow: #9b9b9b 0px 5px 12px -5px;
        }

        .sanj {
            position: absolute;
            right: 27px;
            top: 57px;
            z-index: 9999;
            width: 15px;
            height: 15px;
            background-color: #ffffff;
            transform: rotateZ(45deg);
        }

        .home-div-d {
            position: absolute;
            right: -8px;
            top: 0;
            height: 200px;
            width: 70px;
            display: none;
            z-index: 9999;
            /*background-color: aqua;*/
        }

        .avatar:hover .home-div-d{
            display: block;
        }

        .gr>div{
            margin-top: 17px;
            text-align: center;
        }
        .gr>div>button{
            color: #3e3d3d;
            background-color: transparent;
        }
        .gr>div>button:hover{
            cursor: pointer;
            /*background-color: #9b9b9b;*/
            color: #496ff3;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box-left">
        <ul id="box-ul">
            <li>
                <a href="">
                    <img src="<%=request.getContextPath()%>/img/shenghe.png" alt="">
                    审核管理
                    <img src="<%=request.getContextPath()%>/img/backtop.png" alt="">
                </a>
                <ul>
                    <li>
                        <a href="subpage?ac=articlecheck">
                            帖子审核
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="">
                    <img src="<%=request.getContextPath()%>/img/jinggao.png" alt="">
                    举报管理
                    <img src="<%=request.getContextPath()%>/img/backtop.png" alt="">
                </a>
                <ul>
                    <li>
                        <a href="subpage?ac=articleinform">
                            帖子举报
                        </a>
                    </li>
                    <li>
                        <a href="subpage?ac=userinform">
                            用户举报
                        </a>
                    </li>
                    <li>
                        <a href="subpage?ac=discussinform">
                            评论举报
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="">
                    <img src="<%=request.getContextPath()%>/img/权限.png" alt="">
                    权限管理
                    <img src="<%=request.getContextPath()%>/img/backtop.png" alt="">
                </a>
                <ul>
                    <li>
                        <a href="subpage?ac=dept">
                            部门管理
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="box-right">
        <div class="right-top">
            <div class="right-left">
                <div class="name">
                    <span style="color:#FFF;">
                        
                    </span>
                </div>
                <div class="avatar">
                    <img src="" alt="">
                    <div class="home-div-d">
                        <div class="sanj">
                        </div>
                        <div class="gr">
                            <div><button id="toPersonage">个人中心</button></div>
                            <div><button id="toButton">退出登录</button></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="right-bottom" id="right-bottom">
            <iframe src="subpage?ac=home" width="100%" height="100%"></iframe>
        </div>
    </div>
    <script>
        $(function () {

            $(".box-right>.right-top>.right-left>.name>span").text(sessionStorage.getItem("AdminName"));
            $(".box-right>.right-top>.right-left>.avatar>img").attr("src", "<%=request.getContextPath()%>" + sessionStorage.getItem("avatar"));

            let ful = "1";
            let fa = "1";
            // 展开二级路由
            $("#box-ul>li>a").click(function () {
                event.preventDefault();// 避免点击a标签刷新
                // console.log($(this).children("ul"));
                // $(this).children("img").last() // 获取最后一个img
                // $(this).children("img").last().attr("src") // 获取img的src
                if (ful == "1" && fa == "1") {
                    fa = $(this).children("img").last();
                    ful = $(this).next("ul");// 保存上次显示的ul
                }


                let ul = $(this).next("ul"); // 获取兄弟(ul)
                let img = $(this).children("img").last(); // 获取所有子标签 .last获取最后一个

                // 展开ul
                if (ul.css("display") == "none") {
                    img.attr("src", "<%=request.getContextPath()%>/img/backbottom.png")

                    // console.log("上一个ul");
                    // console.log(ful.css("display"));
                    // console.log(fa);

                    if (ful.css("display") == "block") {
                        // console.log(ful.next("a"));
                        fa.attr("src", "<%=request.getContextPath()%>/img/backtop.png");
                        ful.css("display", "none");
                        ful = $(this).next("ul");
                        fa = $(this).children("img").last();
                    }
                    ul.css("display", "block"); // 展开ul
                    ful = $(this).next("ul");
                    fa = $(this).children("img").last();
                } else {
                    // console.log($(this).children("img").last().attr("src"));
                    img.attr("src", "<%=request.getContextPath()%>/img/backtop.png");
                    ul.css("display", "none"); // 收起ul
                }
                // console.log($(this));
            })
            // 设置 二级路由
            var val = "1";
            $("#box-ul>li>ul>li>a").click(function () {
                event.preventDefault(); // 禁止页面跟新
                // 因为第一次没有上一个标签
                if (val == "1") {
                    val = this;
                }
                if (this != val) {
                    // 上一个标签样式
                    // val 上一个标签
                    val.style.backgroundColor = "transparent";
                    // 当前标签样式
                    $(this).css("background-color", "rgb(72, 72, 72)");
                    // $(this).attr("href") // 获取href
                    rightBottom($(this).attr("href"));
                    // rightBottom(this.attr("href"));
                    // 保存当前标签
                    val = this;
                } else {
                    $(this).css("background-color", "rgb(72, 72, 72)");
                    // $(this).attr("href") // 获取href
                    rightBottom($(this).attr("href"));
                    val = this;
                }
            })

            // 显示内容
            function rightBottom(params) {
                // console.log("i m rightBottom");
                // console.log( $("#right-bottom>iframe").attr("src"));
                $("#right-bottom>iframe").attr("src", params)
            }
        })

        /*$(".avatar").hover(function () {
            if ($(".grshanj").css("display") == "none") {
                $(".grshanj").css("display", "block")
            } else {
                let timerId = setTimeout(function () {
                    $(".gr").hover(function () {
                        if ($(".grshanj").css("display") == "none") {
                            $(".grshanj").css("display", "block")
                        }
                        let timerId2 = setTimeout(function () {
                            $(".grshanj").css("display", "none")
                            clearTimeout(timerId2)
                        }, 1000)
                    })
                    $(".grshanj").css("display", "none")
                    clearTimeout(timerId)
                }, 1000)
            }
        })*/

        // 退出登录
        $("#toButton").click(function () {
            sessionStorage.removeItem("AdminName")
            sessionStorage.removeItem("avatar")
            $.ajax({
                async: true,
                url: '<%=request.getContextPath() %>/back/admin?ac=logout',
                type: 'post',
                success : function (data) {
                    if (data){
                        location.href="admin?ac=tologin"
                    }
                }
            })
        })

        // 个人主页
        $("#toPersonage").click(function () {
            location.href="admin?ac=toPersonage"
        })
    </script>
</div>
</body>
</html>
